import React,{Component} from 'react'
import { Card, Progress, Rate,Collapse, Modal, message } from 'antd';
import {  BlockOutlined, CheckCircleOutlined,DeleteOutlined, DownOutlined, DownSquareOutlined, EditOutlined, IeOutlined, UndoOutlined, UpOutlined, WarningOutlined} from '@ant-design/icons';
import dateUtils from 'utils/dateUtils';
import RecommendTag from 'components/recommend-tag';
import { inject, observer } from 'mobx-react';
import "./index.less"
import { Link } from 'react-router-dom';
import colorUtils from 'utils/colorUtils';

const { Meta } = Card
const { Panel } = Collapse
/**
 * 活动详情卡
 * 调用：activity-card-grid
 * 输入：
 * 时间：20220401
 */
 @inject("activityStore")
 @observer
class ActivityCard extends Component{
    constructor(props){
        super(props)
        this.state = {detailInvalid:false,modalInvalid:false}
    }
    render(){
        const {store,activityStore} = this.props
        const {activityDetail} = store
        const {key,name,description,startTime,endTime,joinNum,score,usedTags,recommendTags,status} = activityDetail
        
        // 是否存在恶意标签
        let isMalicious = false
        let maliciousTag = usedTags.find(usedTag => usedTag.isMalicious === 'Y')
        if (maliciousTag !== undefined){
            console.log("活动" + name + "存在恶意标签")
            isMalicious = true
            
        }
        let currentDay =  new Date()
        let endDay = new Date(endTime)
        let startDay = new Date(startTime)
        let days = dateUtils.getDiffDays(currentDay,endDay)
        let fullDays = dateUtils.getDiffDays(startDay,endDay)
        let dayPercent = days/fullDays * 100
        let starScore = parseInt(score * 5 * 2)/2 
        console.log("store is ",starScore)
        const {detailInvalid} = this.state||{}
        return (
        <div style={{width:"350px"}}
                onMouseEnter = {()=>{this.setState({detailInvalid:true})}}
                onMouseLeave = {()=>{this.setState({detailInvalid:false})}}
        >
            
            <Card
                
                actions={[
                    status==="on"?
                <div onClick={e=>activityStore.apiActivityOff(key)}>
                    <DownOutlined key="setting" style={{color:'green'}} />
                    已上架
                </div>:
                <div  onClick={e=>
                        {
                            if(isMalicious){
                                message.warn("存在恶意标签，不允许上架")
                            } else {
                                activityStore.apiActivityOn(key)
                            }
                        }
                    }>
                    <UpOutlined  key="setting" style={{color:'red'}} />
                    待上架
                </div>
                ,
                <Link to={`/activity-center/edit-activity/${key}`}>
                    <EditOutlined key="edit" />
                </Link>,
                
                <DeleteOutlined key="delete" onClick={()=>this.setState({modalInvalid:true})}/>
                ]}
            >
                
                <Meta
                title={name}
                description={description}
                />
                <div className='card'>
                    <div className='desc'>
                    <li>开始时间：{startTime}</li>
                    <li>结束时间：{endTime}</li>
                    <li>参与人数：{joinNum}</li>
                    
                    {isMalicious
                    ?<li className='malicious'>恶意标签 {maliciousTag&&maliciousTag.name} !!</li>
                    :<Rate  className='rate' disabled allowHalf defaultValue={starScore} />}
                    </div>
                    <div  className='card'>
                        <Progress width={90} type="circle" percent={dayPercent} 
                        format={() => {
                            if (days > 0){
                                return days+" Days/"+fullDays
                            }else{
                                return "Done"
                            }
                            
                        }} />
                    </div>
                    
                </div>
                
                </Card>
                {detailInvalid === true?
                <Collapse 
                    defaultActiveKey={['1']} 
                    bordered={false} 
                    style={{position: 'absolute',width:"inherit",zIndex:"5"}}
                >
                    <Panel header="活动详情" key="1">
                        活动话术：<br/>{activityDetail.message}
                        <p/>
                       <RecommendTag store={{usedTags,recommendTags,showButton:false}}/>
                    </Panel>
                </Collapse>
                :""}
                
                <Modal
                visible={this.state.modalInvalid}
                title="确认删除"
                
                onOk={()=>{
                    this.setState({modalInvalid:false})
                    activityStore.apiDeleteActivity(key)
                    
                }}
                onCancel={()=>{this.setState({modalInvalid:false})}}
                >
                    请确认是否删除活动 "{name}"
                </Modal> 
            </div>
        )
    }

}
export default ActivityCard